<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的属性绑定和双向数据绑定</title>
    <script src="../../assets/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>双向数据绑定</h1>
    <input type="text" v-model="inputValue">
    <p>你输入的信息是: {{inputValue}}</p>
    <section>
        <h5>checkbox多选框</h5>
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="jack">Jack</label>
        <input type="checkbox" id="john" value="John" v-model="checkedNames">
        <label for="john">John</label>
        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
        <label for="mike">Mike</label>
        <div>Checked names: {{ checkedNames }}</div>
    </section>
    <section>
        <h5>radio单选框</h5>
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <div>Picked: {{ picked }}</div>
    </section>
    <section>
        <h5>select下拉选择框</h5>
        <select v-model="selected">
            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <div>Selected: {{ selected }}</div>
    </section>
</div>
<script>
    // 根实例
    new Vue({
        el: '#root',
        data: {
            msg: 'hello',
            title: 'this is title',
            content: 'world',
            isOk: true,
            MenuClass: 'example-class',
            isActive: true,
            hasError: false,
            size: 20,
            bgColor: 'red',
            inputValue: '',
            checkedNames: [],
            picked: '',
            selected: ''
        }
    })
</script>
</body>
</html>